Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@os-design/error-boundary
Advanced tools
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
Error Boundary allows you to catch JS errors that occur in the UI. This package is a wrapper that allows you to wrap your components to catch UI errors that may occur inside them.
Install the package using the following command:
yarn add @os-design/error-boundary
Let's assume that we have a component that sometimes throw the error.
import React, { useState } from 'react';
const BadComponent: React.FC = () => {
const [hasError, setHasError] = useState(false);
if (hasError) {
throw new Error('Something happened');
}
return (
<>
<p>I am working!</p>
<button onClick={() => setHasError(true)}>Throw the error</button>
</>
);
};
export default BadComponent;
To catch errors that may occur inside the BadComponent
, wrap it with the ErrorBoundary
as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={<h1>An error occured</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Most likely, you want to print an error message or render the fallback component, depending on the error type (for example, render some component, if there is no network connection).
In this case, you can pass a function to the fallback and get an error like this:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={({ error }) => <h1>{error.message}</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Let's assume that you have a component that throws the «No error connection» error. You successfully render another component with the error message, but what if the user has already restored the Internet connection?
In this case, you also need to render the retry button. When you click on it, the component will try to render again. You can do it in the following way:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
<BadComponent />
</ErrorBoundary>
);
export default App;
useQueryLoader
/ loadQuery
As Relay documentation says:
When using
useQueryLoader
/loadQuery
to fetch a query, in order to retry after an error has occurred, you can callloadQuery
again and pass the new query reference tousePreloadedQuery
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button
onClick={() => {
loadQuery(/* ... */);
retry();
}}
>
Retry
</button>
</div>
)}
>
<MainContent queryRef={queryRef} />
</ErrorBoundary>
);
};
export default App;
useLazyLoadQuery
As Relay documentation says:
When using
useLazyLoadQuery
to fetch a query, in order to retry after an error has occurred, you can attempt to re-mount and re-evaluate the query component by passing it a newfetchKey
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
{(fetchKey) => <MainContent fetchKey={fetchKey} />}
</ErrorBoundary>
);
};
export default App;
FAQs
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The npm package @os-design/error-boundary receives a total of 69 weekly downloads. As such, @os-design/error-boundary popularity was classified as not popular.
We found that @os-design/error-boundary demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.